<template>
  <div>
    <div>小马教育</div>
    <!-- <img src="~assets/logo.png" />
    <div class="icon"></div>-->
    <div>{{fullname}}</div>
    <xiao-m :a-arr="oVal" @oInput="oInput" :name="kitty" :information="information"></xiao-m>

    <p>-----------------------------------------</p>
    <p @click="fntest">button</p>
    {{oVal}}
    <p>{{kitty}}</p>
    <p>{{information}}</p>
    <div @click="test">跳转测试</div>
    <div @click="test1">跳转测试</div>
     <div @click="plugin">跳转测试</div>
  </div>
</template>

<script>
import XiaoM from "./XiaoM";
export default {
  name: "XiaoMa",
  components: {
    XiaoM
  },
  data() {
    return {
      first: "2",
      second: "3",
      oVal: {
        name: "kobe",
        age: 10
      },
      kitty: "kitty",
      tobj: {
        a: 1
      },
      information: {
        age: 25,
        phone: 18700000000,
        address: {
          homeAddress: "安徽"
        }
      },
      tempName: "",
      tempInformation: {},
      tempTestName: ""
    };
  },

  computed: {
    fullname() {
      return this.first + this.second;
    }
  },
  destroyed(){
    console.log('destroyed')
  },
  activated() {
    console.log("activated");
  },
  deactivated() {
    console.log("deactivated");
  },
  created(){
    console.log("created")
  },
  methods: {
    oInput(text) {
      this.oVal = text;
    },
    fntest() {
      this.tobj["a"]++;
    },
    test() {
      this.$router.push({
        name: "user",
        params: {
          username: "foo"
        }
      });
    },
    test1() {
      this.$router.push({
        path: "test"
      });
    },
  plugin(){
    console.log(this.$toast)
    this.$toast.show()
  }
  },
  watch: {
    tobj: {
      handler(new_value, old_value) {
        console.log(new_value, old_value);
      },
      deep: true
    }
  }
};
</script>

<style>
.icon {
  width: 200px;
  height: 200px;
  background: url("~assets/logo.png");
}
</style>